<%-- 
    Document   : main
    Created on : Feb 6, 2012, 4:20:33 PM
    Author     : PhucAn
--%>


<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.fckeditor.net" prefix="fck" %>
<%@include file="../handler/question-add-handler.jsp" %>
<!DOCTYPE html>
<html>
    <head>      


        <script type="text/javascript">
            var idx=3;
            $(document).ready(function(){
                $("#add-more").click(function(){
                    idx++;
                    var row='<tr id="row-'+(idx+1)+'">';
                    row+='<td>Answer ';
                    row+=(idx+1);
                    row+='</td><td><textarea name="answer"></textarea></td>';
                    row+=('<td><input type="radio" id="single-ans-result-'+(idx+1)+'" value="'+(idx+1)+'" name="single-ans-result"/>');                  
                    row+='<input type="checkbox" id="multi-ans-result-'+(idx+1)+'" value="'+(idx+1)+'" name="multi-ans-result" style="display:none;"/>';
                    row+='<td><button onclick="removeThis(';
                    row+=+(idx+1)
                    row+=');">Remove</button></td></tr>';                    
                    $(row).insertBefore("#more");  
                    //check if current question is allow multichoice or not to display correnponding
                    if($('#multi-choice:checked').val()=='on'){
                        
                        $('#multi-ans-result-'+(idx+1)).show();
                        $('#single-ans-result-'+(idx+1)).hide();
                        // alert ($('#multi-choice:checked').val());
                    }else{
                        $('#multi-ans-result-'+(idx+1)).hide();
                        $('#single-ans-result-'+(idx+1)).show();
                    }
                   
                   
                });
                $('#multi-choice').click(function(){
                    if($('#multi-choice:checked').val()=='on'){                        
                        $('input:checkbox[name="multi-ans-result"]').show();
                        $('input:radio[name="single-ans-result"]').hide();                     
                    }else{
                        $('input:checkbox[name="multi-ans-result"]').hide();
                        $('input:radio[name="single-ans-result"]').show();
                    }
                   
                });
            });
            function removeThis(i){
                $('#row-'+i).remove();
            }
            function validateForm(){                
                var rs=true;
                if($('#multi-choice:checked').val()!='on')
                    rs=validate([
                        {name:'single-ans-result',type:'array'}                 
                    ]);
                else rs=validate([{name:'multi-ans-result',type:'array'}]);
                return rs;
            }
        </script>
    </head>    
    <body>    

        <form method="post" action="#" onsubmit="return validateForm();">
            <table width="90%" class="form-table">
                <tr>
                    <td width="100">
                        Question content:
                    </td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">
                        <fck:editor inputName="content" instanceName="defaultEditor" height="150" toolbarSet="Basic" />
                    </td>

                </tr>
                <tr>
                    <td></td>
                    <td colspan="2"><input type="checkbox" id="multi-choice" name="multi-choice"/>Allow multi-choice</td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">Mark:<input type="text" name="mark" value="1" id="mark"/>
                        - Level: 
                        <select name="level">
                            <option value="1">Easy</option>
                            <option value="2" selected="selected">Medium</option>
                            <option value="3">Hard</option>
                        </select>
                    </td>
                </tr>
                <tr id="row-1">
                    <td>Answer 1: </td>
                    <td><textarea name="answer" class=""></textarea></td>
                    <td>
                        <input type="radio" value="1" id="single-ans-result-1" name="single-ans-result"/>
                        <input type="checkbox" value="1" id="multi-ans-result-1" name="multi-ans-result" style="display: none;"/>
                    </td>
                    <td><button type="button" value="1" onclick="removeThis(1);">Remove</button></td>
                </tr>
                <tr id="row-2">
                    <td>Answer 2: </td>
                    <td><textarea name="answer" class=""></textarea></td>
                    <td>
                        <input type="radio" value="2" id="single-ans-result-2" name="single-ans-result"/>
                        <input type="checkbox" value="2" id="multi-ans-result-2" name="multi-ans-result" style="display: none;"/>
                    </td>
                    <td><button type="button" value="2" onclick="removeThis(2);">Remove</button></td>
                </tr>
                <tr id="row-3">
                    <td>Answer 3: </td>
                    <td><textarea name="answer" class=""></textarea></td>
                    <td>
                        <input type="radio" value="3" id="single-ans-result-3" name="single-ans-result"/>
                        <input type="checkbox" value="3" id="multi-ans-result-3" name="multi-ans-result" style="display: none;"/>
                    </td>
                    <td><button type="button"  onclick="removeThis(3);">Remove</button></td>
                </tr>
                <tr id="row-4">
                    <td>Answer 4: </td>
                    <td><textarea name="answer" class=""></textarea></td>
                    <td>
                        <input type="radio" value="4" id="single-ans-result-4" name="single-ans-result"/>
                        <input type="checkbox" value="4" id="multi-ans-result-4" name="multi-ans-result" style="display: none;"/>
                    </td>
                    <td><button type="button"  onclick="removeThis(4);">Remove</button></td>
                </tr>
                <tr id="more">
                    <td></td>
                    <td>                      
                    </td>
                    <td></td>
                    <td> <button id="add-more" name="add-more" type="button" >Add answer</button></td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="3"><input type="submit" name="submit" value="Create question"/></td>
                </tr>
            </table>
        </form>       
</html>
